<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>4.3 响应式布局</title>

		<link rel="stylesheet" href="css/common.css">
		<link rel="stylesheet" href="css/big.css" media="(min-width:769px)">
		<link rel="stylesheet" href="css/small.css" media=" (min-width:400px) and (max-width:768px)">

		<link rel="stylesheet" href="css/x_small.css" media="(max-width:399px)">

		<style>

		</style>
	</head>
	<!-- 
 
	响应式布局  确保一个页面在 所有终端都能正常显示令人满意的效果
	
		一套方案 处处运行。
 
 设计思路：  %， rem 作为单位
 -->
	<body>


		<div id="layout">

			<div id="top">

			</div>

			<div id="main">

				<div class="left-side">
					<li> 分类1 </li>
					<li> 分类2 </li>
					<li> 分类3 </li>
					<li> 分类4 </li>
					<li> 分类5 </li>
					<!-- <li> 分类6 </li> -->
				</div>

				<div class="main-content">

					<li>图片1</li>
					<li>图片2</li>
					<li>图片3</li>
					<li>图片4</li>
					<li>图片5</li>
					<li>图片6</li>
					<li>图片7</li>
					<li>图片8</li>

				</div>

			</div>

		</div>



	</body>
</html>
